<template>
<view>
<view class="notice-warp">
  <view class="notice">
    <text>拼团须知：</text>
  </view>
  <view class="notice-cont">
    <text>好友拼团，人满发货，人不满退款</text>
  </view>
</view>
<view class="goods-warp">
  <view class="goods-pic">
    <image :src="goods.goods_img"></image>
  </view>
  <view class="goods-cont fr">
    <view class="goods-title">
      <text>{{goods.goods_name}}</text>
    </view>
    <view class="goods-spec">
      <text>{{tzname}}发起的拼团</text>
    </view>
    <view class="goods-price">
      <text>￥</text>
      <text>{{goods.price}}</text>
    </view>
    <view class="goods-people">
      <text>{{group_need_num}}人团</text>
    </view>
  </view>
</view>
<view class="people-cont">
  <view class="terminate-warp">
    <image src="/static/remao_shop/img/left.png"></image>
    <view class="terminate-left">
      还差
      <text>{{c}}</text>人，
    </view>
    <view class="time_tt">
      <view v-if="isOver" class="time">
        <view>剩于</view>
        <view class="terminate">
          <view>{{overTime[1]}}</view>:
          <view>{{overTime[2]}}</view>:
          <view>{{overTime[3]}}</view>
        </view>
        <view>结束</view>
      </view>
      <view v-if="!isOver" class="time">
        <view>
          <view class="endTime">
            <view>00</view>:
            <view>00</view>:
            <view>00</view>
          </view>
        </view>
      </view>
    </view>
    <image src="/static/remao_shop/img/right.png"></image>
  </view>
  <view class="people-warp">
    <view class="people">
      <view class="colonel-warp">
        <image :src="tzimg"></image>
        <view class="colonel">团长</view>
      </view>
      <text>{{tzname}}</text>
    </view>
    <view v-for="(item, index) in ty" :key="index" class="people">
      <image :src="item.avatar"></image>
      <text>{{item.nickname}}</text>
    </view>
     <view class="erkai"> <button class="nopeople" open-type="share" v-if="share == false">添加团友</button>
  </view>
  </view>
</view>
<!--  -->
<view @tap="isCT" data-car="3" class="yiqipin" v-if="share == true">
  <button class="comeOn">我要一起拼</button>
</view>
<!-- 选择规格 -->
<view class="mask-box" :hidden="popup">
  <view @tap.stop="popuphidden" style="width:100%;height:650rpx;"></view>
  <view class="mask-bot">
    <view>
      <view class="popup-warp">
        <view class="popup-pic fl">
          <image :src="isShowImg" :data-img="isShowImg" @tap.stop="lookPic"></image>
        </view>
        <view class="pop-warp fr">
          <view class="pop-title">
            <text>{{shopInfoList.name}}</text>
          </view>
          <view class="pop-current">
            ￥
            <text>{{isShowMoney}}</text>
          </view>
          <view class="pop-repertory fr">
            库存
            <text>{{shopInfoList.goods_number}}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-for="(item, index) in specification" :key="index" class="spec-warp">
      <view class="spec">
        <text>{{item.spec_name}}</text>
      </view>
      <view class="option-warp">
        <view class="frame fl">
          <view>
            <block v-for="(item, index2) in item.spec_values" :key="index2">
              <text :class="item.isSelect?'op-active':'normal'" :data-select-index="id" :data-attr-index="index" :data-content="specification" @tap="clickMenu">{{item.spec_value}}</text>
            </block>
          </view>
        </view>
      </view>
    </view>
    <view class="count-warp">
      <view class="spec">
        <text>数量</text>
      </view>
      <view class="but">
        <text @tap="deleteShopNum">-</text>
        <text class="but-count">{{shopNum}}</text>
        <text @tap="addShopNum">+</text>
      </view>
    </view>
    <view class="btn-sure">
      <view class="confirm" @tap="optionsure">
        <text>确定</text>
      </view>
    </view>
  </view>
</view>
</view>
</template>

<script>
var iswe7 = wx.getStorageSync("iswe7");
import api from "../../../api";
var app = getApp();
var guige = [];
var myGuige = null;
var countTime;

export default {
  data() {
    return {
      bannerList: [],
      shopId: '',
      // shopInitImg: '',
      shopInitPrice: '',
      // 请求参数
      requestShopId: '',
      // 选择规格判断默认图片&价格--选择好规格后的价格和图片
      isShowImg: '',
      isShowMoney: '',
      // 商品详情列表
      shopInfoList: [],
      // 商品数量
      shopNum: 1,
      // 商品规格列表
      specification: [],
      // 选择好的规格
      changeSpecification: [],
      // tab切换
      navList: ["详情", "评价"],
      // 规格选择列表
      poplist: [],
      idd: [],
      // 是否选择了规格 判断
      ischangespecification: '',
      // 加入购物车&购买
      car: '',
      boolean: false,
      imgUrls: ["/static/remao_shop/img/details-banner.png", "/static/remao_shop/img/details-banner.png"],
      countDownList: [],
      actEndTimeList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 1000,
      status: 0,
      pop: 0,
      showView: true,
      popup: true,
      // 判断是否为秒杀商品、不秒杀0.秒杀1
      ismiaosha: 1,
      orderType: '',
      arrList: [],
      //处理前
      arrListArray: [],
      //处理后
      isAssemble: false,
      //更多拼团
      isCloseAssemble: '',
      //是否有人开团
      shareAssemble: '',
      //拼团分享订单id
      overTime: [],
      // 判断活动是否结束
      isOver: true,
      add_time: '',
      share: false,
      order_id: "",
      userId: "",
      c: "",
      ty: "",
      goods: "",
      tzimg: "",
      tzname: "",
      group_need_num: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.isLogin(options); //收藏初始

    console.log(options);
    var order_id = options.id;
    this.setData({
      order_id: order_id
    });
    console.log(this.order_id);
    this.getDetails();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    console.log(res);

    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target);
    }

    return {
      title: "快来拼" + this.goods.goods_name,
      imageUrl: this.goods.goods_img,
      path: 'hotmall/packageA/spellwait/spellwait?share=' + true + "&id=" + this.order_id + "&uid=" + this.userId
    };
  },
  methods: {
    //判断登录
    isLogin: function (options) {
      wx.getStorage({
        key: 'userId',
        success: res => {
          this.setData({
            userId: res.data
          });

          if (options.share) {
            console.log("81", this.userId);

            if (options.uid == this.userId) {
              this.setData({
                share: false
              });
            } else {
              this.setData({
                share: true
              });
            }
          }
        },
        fail: res => {
          if (iswe7 == 1) {
            wx.navigateTo({
              url: '../../packageA/login/login'
            });
          } else {
            wx.navigateTo({
              url: '../../packageA/logins/login'
            });
          }
        }
      });
    },
    //获取详情
    getDetails: function () {
      var that = this;
      app.globalData.request({
        url: api.gzSea.details,
        data: {
          order_id: this.order_id
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: res => {
          console.log(res);
          var c = res.group_need_num - (res.tuan_yuan.length + 1);
          console.log(res.group_need_num, "-", res.tuan_yuan.length + 1, "=", c);
          this.setData({
            c: c,
            ty: res.tuan_yuan,
            goods: res.goods_message,
            tzimg: res.tuan_zhang.avatar,
            tzname: res.tuan_zhang.nickname,
            add_time: res.end_time,
            group_need_num: res.group_need_num,
            shopId: res.goods_message.goods_id
          }); // 计时器

          countTime = setInterval(that.countDown, 1000);
        }
      });
    },
    //判断是否可以参团
    isCT: function (e) {
      app.globalData.request({
        url: api.gzSea.examine,
        data: {
          order_id: this.order_id,
          user_id: this.userId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        success: pintuan => {
          // console.log(res, "去参团")
          if (pintuan.status == 0) {
            wx.showToast({
              title: pintuan.msg,
              icon: "none"
            });
          } else if (pintuan.status == 1) {
            this.getlist();
            this.popupshow(e);
          }
        }
      });
    },

    // 倒计时
    countDown() {
      // console.log(this.data.add_time)
      let endTime = parseInt(this.add_time);
      let nowTime = parseInt(new Date().getTime() / 1000); //console.log(nowTime, endTime)

      let time = endTime - nowTime;
      var hour = parseInt(time / 60 / 60); //console.log(hour)

      if (String(hour).length == 1) {
        hour = '0' + hour;
      }

      var minute = parseInt(time / 60 % 60);

      if (String(minute).length == 1) {
        minute = '0' + minute;
      }

      var seconds = parseInt(time % 60);

      if (String(seconds).length == 1) {
        seconds = '0' + seconds;
      } // console.log(hour, minute, seconds)


      let timer = [];
      timer[1] = hour;
      timer[2] = minute;
      timer[3] = seconds; // console.log(timer)

      if (time > 0) {
        //判断如果时间过期则改变
        this.setData({
          overTime: timer,
          isOver: true
        });
      } else {
        clearInterval(countTime);
        this.setData({
          isOver: false
        });
      }
    },

    popupshow: function (e) {
      console.log(e);
      this.setData({
        car: e.currentTarget.dataset.car
      });
      this.setData({
        popup: false
      });
    },
    // 预览单张图片
    lookPic: function (e) {
      console.log(e.currentTarget.dataset.img);
      var picList = [];
      picList.push(e.currentTarget.dataset.img);
      wx.previewImage({
        current: picList[0],
        // 当前显示图片的http链接
        urls: picList // 需要预览的图片http链接列表

      });
    },
    // 预览多张图片
    lookPics: function (e) {
      console.log(e.currentTarget.dataset.img);
      var picList = [];
      picList.push(e.currentTarget.dataset.img);
      wx.previewImage({
        current: picList[0],
        // 当前显示图片的http链接
        urls: picList // 需要预览的图片http链接列表

      });
    },
    //消失
    popuphidden: function () {
      this.setData({
        popup: true
      });
    },
    // 选择规格
    clickMenu: function (event) {
      let that = this; // console.log(event)

      let selectIndex = event.currentTarget.dataset.selectIndex;
      let attrIndex = event.currentTarget.dataset.attrIndex;
      let content = event.currentTarget.dataset.content;
      var count = content[selectIndex].spec_values.length;

      for (var i = 0; i < count; i++) {
        content[selectIndex].spec_values[i].isSelect = false;
      }

      content[selectIndex].spec_values[attrIndex].isSelect = true; // // 必须重新渲染数据----------为了添加isSelect属性

      that.setData({
        specification: content
      }); // 选择规格

      if (selectIndex == 0) {
        guige[0] = this.specification[0].spec_values[attrIndex].spec_value_id;
      } else if (selectIndex == 1) {
        guige[1] = this.specification[1].spec_values[attrIndex].spec_value_id;
      } else if (selectIndex == 2) {
        guige[2] = this.specification[2].spec_values[attrIndex].spec_value_id;
      }

      console.log(guige);

      if (this.specification.length == 1) {
        myGuige = guige[0];
      } else if (this.specification.length == 2) {
        myGuige = guige[1] + '_' + guige[0];
      } else if (this.specification.length == 3) {
        myGuige = guige[2] + '_' + guige[1] + '_' + guige[0];
      }

      console.log();
      console.log(myGuige); // 遍历所有可用规格并进行匹配

      for (let item in this.shopInfoList.sys_attrprice) {
        if (myGuige == item) {
          // 显示对应的价格和图片
          let showguige1 = this.shopInfoList.sys_attrprice[myGuige].pic;
          let showguige2 = this.shopInfoList.sys_attrprice[myGuige].price;
          this.setData({
            isShowMoney: showguige2
          });

          if (showguige1 != '') {
            this.setData({
              isShowImg: showguige1
            });
          }
        }
      }
    },

    // 增加商品数量
    addShopNum() {
      if (this.shopNum < this.shopInfoList.goods_number) {
        this.setData({
          shopNum: this.shopNum + 1
        });
      } else {
        wx.showToast({
          title: '抱歉亲，库存不够了呢！',
          duration: 2000,
          icon: 'none'
        });
      }
    },

    // 减少商品数量
    deleteShopNum() {
      if (this.shopNum > 1) {
        this.setData({
          shopNum: this.shopNum - 1
        });
      } else {
        wx.showToast({
          title: '亲，购买数量不能再减了哦！',
          duration: 2000,
          icon: 'none'
        });
      }
    },

    //点击确定
    optionsure(e) {
      let that = this;
      let a = wx.getStorageSync("userId");
      console.log(a);

      if (a == '') {
        wx.switchTab({
          url: '../../pages/mine/mine'
        });
      } else {
        that.setData({
          userId: a
        });

        if (this.specification.length != 0 && myGuige == null) {
          wx.showToast({
            title: '请选择规格',
            icon: 'none',
            duration: 1000
          });
        } //  else {
        //    if (myGuige.indexOf("undefined") != -1) {
        //     wx.showToast({
        //       title: '请选择规格',
        //       icon: 'none',
        //       duration: 1000,
        //     })
        //   } 
        else {
            // 判断库存够不够
            if (this.shopNum > this.shopInfoList.goods_number) {
              wx.showToast({
                title: '亲，库存不够了呢',
                icon: 'none',
                duration: 1000
              });
            } else {
              // 购物车
              if (this.specification.length == 1) {
                var myGuigecart = guige[0];
              } else if (this.specification.length == 2) {
                var myGuigecart = guige[1] + ',' + guige[0];
              } else if (this.specification.length == 3) {
                var myGuigecart = guige[2] + ',' + guige[1] + ',' + guige[0];
              }

              console.log(myGuigecart);
              console.log(that.car);
              app.globalData.request({
                url: api.fyz.add_cart,
                data: {
                  goods_id: that.shopId,
                  uid: that.userId,
                  goods_number: that.shopNum,
                  spec_value_id: myGuigecart,
                  type: 2
                },
                header: {
                  'content-type': 'application/x-www-form-urlencoded' // 默认值

                },
                method: 'POST',
                dataType: 'json',
                responseType: 'text',
                success: res => {
                  console.log(res);

                  if (res.status == 1) {
                    wx.showToast({
                      title: res.msg,
                      duration: 2000
                    });
                    setTimeout(function () {
                      that.setData({
                        popup: true
                      });
                    }, 2000); // wx.showToast({
                    //   title: res.data.msg,
                    //   duration: 1000
                    // });
                    // setTimeout(function () {

                    console.log(res.cart_id);
                    wx.navigateTo({
                      url: '../affirm/affirm?userId=' + that.userId + '&cart_id=' + res.cart_id + '&type=' + 2 + '&ismiaosha=' + 1 + '&order_type=' + 3 + "&oid=" + that.order_id
                    });
                    that.setData({
                      popup: true
                    }); // }, 1000)
                  } else {
                    wx.showToast({
                      title: res.msg,
                      duration: 2000
                    });
                  }
                },
                fail: function (res) {},
                complete: function (res) {}
              });
            }
          } // }

      } // this.setData({ popup: true })

    },

    // 加载商品详情
    getlist: function () {
      var that = this;
      var uid = wx.getStorageSync("userId");
      that.setData({
        userId: uid
      });
      app.globalData.request({
        url: api.fyz.shopInfo,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        data: {
          goods_id: that.shopId,
          user_id: that.userId
        },
        success: res => {
          console.log(res);
          this.setData({
            bannerList: res.pic,
            shopInfoList: res,
            specification: res.specification,
            isShowMoney: res.price,
            isShowImg: res.thumb_img
          }); // 判断该商品是否收藏

          if (res.is_collect == 0) {
            this.setData({
              showView: true
            });
          } else if (res.is_collect == 1) {
            this.setData({
              showView: false
            });
          }

          console.log(that.showView);
        },
        fail: function (res) {},
        complete: function (res) {}
      });
    },

    banner(e) {
      console.log(this.bannerList);
      var list = [],
          index = e.currentTarget.dataset.index;
      console.log(e);

      for (var i = 0; i < this.bannerList.length; i++) {
        list[i] = this.bannerList[i].big;
      }

      wx.previewImage({
        current: list[index],
        urls: list // 需要预览的图片http链接列表

      });
    }

  }
};
</script>
<style>
@import "./spellwait.css";
</style>